<template>
	<view class="item" @click="godetail(item_pid)">
		<image  :src="item_src" mode="widthFix"></image>
		<view class="title_container">
			<text class="title">{{item_title}}</text>
		</view>
		<view class="item-info">
			<text>{{item_subtitle}}</text>
			<text>{{item_subtitle_2}}</text>
			<text>{{item_subtitle_3}}</text>
		</view>
		<view class="content">
			<view class="location">{{item_content}}</view>
		</view>
		<view class="content">
			<text>{{item_content_2}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item_pid:{
				type:String,
				default:''
			},
			item_src:{
				type:String,
				default:'',
			},
			item_title:{
				type:String,
				default:'标题'
			},
			item_subtitle:{
				type:String,
				default:'副标题'
			},
			item_subtitle_2:{
				type:String,
				default:'副标题2'
			},
			item_subtitle_3:{
				type:String,
				default:'副标题3'
			},
			item_content:{
				type:String,
				default:'文本内容',
			},
			item_content_2:{
				type:String,
				default:'文本内容2'
			}
			// item_buttonText:{
			// 	type:String,
			// 	default:'按钮标题'
			// }
			
		},
		data() {
			return {
				
			};
		},
		methods:{
			godetail(pid){
				console.log(pid);
				uni.navigateTo({
					url:'../../pages/index/functions_details/functions_details'
				 })
			}
		}
	}
</script>

<style lang="scss">
.item{
	margin:10rpx 0rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	image{
		margin: 10rpx 0 0 0;
		display: inline-block;
		width: 360rpx;
		height: 200rpx;
		padding: 10rpx 20rpx 0rpx 20rpx;
	}
	.item-info{
		padding: 10rpx 0;
		display: flex;
		padding-left: 20rpx;
		
		// justify-content: space-around;
		align-items: center;
		font-size: 24rpx;
		text{
			margin: 4px;
			color:rgb(30,212,125);
			border: 1px solid rgb(30,212,125);
			padding: 2px;
			border-radius: 6px;
		}
		
	}
	.title_container{
		
		.title{
			font-size: 32rpx;
			font-weight: bold;
			padding-left: 20rpx; 
			height: 86rpx;
			width: 320rpx;
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
		}
	}
	
	.content{
		color: rgb(150,150,150);
		padding: 0rpx 20rpx 10rpx 20rpx;
		overflow: hidden;
	}
	.location{
		display: block;
		width: 320rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
